<template>
  <FormProvider :form="form">
    <SchemaField>
      <Space>
        <SchemaStringField name="input" x-component="Input" x-decorator="FormItem" title="账号" />
      </Space>
    </SchemaField>
    <Submit @click="submitForm">提交</Submit>
  </FormProvider>
</template>

<script setup>
import { ref } from 'vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import { FormItem, Input, Submit, Space } from '@formily/antdv-x3'

const { SchemaField, SchemaStringField } = createSchemaField({
  components: {
    Input,
    FormItem,
    Submit
  },
});

// 创建表单实例
const form = ref(createForm());

const submitForm = async () => {
  try {
    // 验证表单
    await form.value.validate();
    console.log('表单验证通过，数据：', form.value.values);
  } catch (errors) {
    console.log('表单验证失败：', errors);
  }
};
</script>